<template>
  <div id="set">
    <div class="create_cha">{{setId=='c'?'查看原公司介绍》》》》':'查看原导文》》》》'}}</div>
    <el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-ruleForm">
      <el-form-item class="set_title" :label="setId=='c'?'文章标题':'导文标题'" prop="title">
        <el-input v-model.trim="form.title" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <span>阿九</span> 
      </el-form-item>
      <el-form-item label="上传导文图片">
        <el-upload
          :limit="5"
          :on-success="uploadSuccess"
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="做客">
        </el-dialog>
        <p class="f_13 c_gray">最多可上传5张图片，必须是jpeg、jpg、png、bmp格式，且大小不超过5M</p>
      </el-form-item>
      <el-form-item v-if="imgUrl.length>0&&form.title" class="set_area" label="输入投案文稿">
        <div class="fss">
          <el-input type="textarea" v-model="form.area" placeholder="请输入"></el-input>
          <p class="set_button mg_l20">
            <el-button @click="setPreview('form')" size="small" type="info">预览</el-button>
            <el-button @click="selease('form')" size="small" type="primary">发布</el-button>
          </p>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="form.title"
      :visible.sync="centerDialogVisible"
      width="600px"
      center>
      <div>
        <p class="fsc mg_l30  mg_t30" v-for="(item,index) of imgUrl" :key="index"><img class="set_img" :src="item" alt=""></p>
        <p class="mg_l30 mg_t30">{{form.area}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        setId: '',
        imgUrl: [],   //上传img的url
        dialogImageUrl: '',
        dialogVisible: false,
        centerDialogVisible: false,
        form: {
          title: '',
          area: ''
        },
        rules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur'}],
        },
      }
    },
    created() {
      this.setId = this.$route.params.id;
    },
    watch: {
      '$route' (to, from) {
        console.log(to,from)
        this.isSetId()
      }
    },
    methods: {
      setPreview(formName) {       //预览
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.centerDialogVisible = true
          } else {
            return false;
          }                          
        });
      },

      selease(formName) {     //发布
        console.log(this.setId)
      

      },
      isSetId() {
        this.setId = this.$route.params.id
      },
      
     
      uploadSuccess(response, file, fileList) {  //上传成功
        // console.log(response, file, fileList)
        this.imgUrl.push(file.url)
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
        this.imgUrl.splice(this.imgUrl.indexOf(file.url),1)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>
<style scoped lang="less">
  .set_button .el-button {
    margin-left: 0;
  }
  .set_title {
    width: 500px;
  }
  .set_area {
    width: 800px;
  }
  .set_img {
    max-width: 400px;
  }
  
</style>
<style>
  #set .el-textarea__inner {
    height: 90px;
  }
  #set .el-dialog__header {
    border-bottom: none !important;
  }
  .create_cha {
    color: #00999B;
    margin: 10px 50px 50px 50px;
  }
</style>


